<template>
  <div class="mod-user">
    <el-form :inline="true" :model="formData" label-width="100px" label-position="right">
      <el-form-item label="充电桩编号">
        <el-input @change="searchChange" v-model="formData.code" placeholder="充电桩编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="片区名称">
        <el-input @change="searchChange" placeholder="片区名称" v-model="formData.chargingGroupName" clearable></el-input>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input @change="searchChange" placeholder="订单编号" v-model="formData.orderNumber" clearable></el-input>
      </el-form-item>

      <el-form-item label="分佣类型">
        <el-select v-model="formData.source" @change="searchChange" clearable>
          <el-option v-for="(item, index) in sourceTypeList" :key="index" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分佣手机号">
        <el-input @change="searchChange" placeholder="分佣手机号" v-model="formData.partnerMobile" clearable></el-input>
      </el-form-item>
      <el-form-item label="分佣人姓名">
        <el-input @change="searchChange" placeholder="分佣人姓名" v-model="formData.partnerName" clearable></el-input>
      </el-form-item>
      <el-form-item label="分佣始/束">
        <el-date-picker v-model="formData.createDate" @change="searchChange" value-format="yyyy-MM-dd" type="daterange"
          range-separator="至" start-placeholder="开始日期" :picker-options="pickerOptions" end-placeholder="结束日期" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.stop="searchChange">搜索</el-button>
        <el-button type="primary" size="small" @click.stop="exportExcel">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="sumary-list">
      <div>订单金额：{{ totalOrderAmount }}</div>
      <div>分佣订单金额：{{ totalDivideAmount }}</div>
      <div>分佣订单数量：{{ divideOrderCount }}</div>
    </div>
    <avue-crud ref="crud" :page="page" :data="dataList" :table-loading="dataListLoading" :option="tableOption"
      @size-change="sizeChange" @current-change="currentChange">
      <template slot-scope="scope" slot="rate">
        <div>{{ scope.row.rate }}%</div>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { tableOption } from '@/crud/order/commissionList'
import { exportExcelCb } from '@/utils/index'
import '@/utils/public'
export default {
  data() {
    let nowDate = new Date(); //当前日期
    let nowMonth = nowDate.getMonth(); //当前月
    let nowYear = nowDate.getFullYear(); //当前年
    //本月的开始时间
    let monthStartDate = new Date(nowYear, nowMonth, 1);
    return {
      dataList: [],
      dataListLoading: false,
      showPowerDiagram: false,
      showOrderRefund: false,
      tableOption: tableOption,
      formData: {
        code: '',
        chargingGroupName: '',
        partnerMobile: '',
        orderNumber: '',
        divideStartTime: monthStartDate.format('yyyy-MM-dd'),
        divideEndTime: nowDate.format('yyyy-MM-dd'),
        createDate: [monthStartDate.format('yyyy-MM-dd'), nowDate.format('yyyy-MM-dd')],
        partnerName: '',
        source: '',
        incomeType: 0
      },
      sourceTypeList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '市场合伙人单次充电分佣',
          value: 1
        },
        {
          label: '管理合伙人单次充电分佣',
          value: 2
        },
        {
          label: '公司单次充电分佣',
          value: 3
        },
        {
          label: '退款分佣',
          value: 4
        }
      ],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      options: [],
      props: {
        multiple: false,
        label: 'name',
        value: 'id',
        children: 'childs'
      },
      divideOrderCount: 0,
      totalDivideAmount: 0,
      totalOrderAmount: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const start = new Date(new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000 * 7)
            const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
            picker.$emit('pick', [start.format('yyyy-MM-dd'), end.format('yyyy-MM-dd')])
          }
        }, {
          text: '本月',
          onClick(picker) {
            const start = new Date(nowYear, nowMonth, 1)
            const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
            picker.$emit('pick', [start.format('yyyy-MM-dd'), end.format('yyyy-MM-dd')])
          }
        }, {
          text: '上个月',
          onClick(picker) {
            const end = new Date(new Date(new Date(nowYear, nowMonth, 0)).getTime() + 24 * 60 * 60 * 1000 - 1)
            const start = new Date(nowYear, nowMonth - 1, 1)
            picker.$emit('pick', [start.format('yyyy-MM-dd'), end.format('yyyy-MM-dd')])
          }
        }, {
          text: '上上月',
          onClick(picker) {
            const end = new Date(new Date(new Date(nowYear, nowMonth - 1, 0)).getTime() + 24 * 60 * 60 * 1000 - 1)
            const start = new Date(nowYear, nowMonth - 2, 1)
            picker.$emit('pick', [start.format('yyyy-MM-dd'), end.format('yyyy-MM-dd')])
          }
        }]
      }
    }
  },

  mounted() {
    this.getAreaList()
    this.getDataList(this.page, this.formData)
  },

  methods: {
    // 获取数据列表
    getDataList(page, params) {
      if (params.createDate == null || params.createDate.length == 0) {
        this.$message.error('日期不能为空')
        return
      } else {
        let start_date = new Date(params.createDate[0].replace(/-/g, "/"))
        let end_date = new Date(params.createDate[1].replace(/-/g, "/"))
        if (start_date.getYear() != end_date.getYear()) {
          this.$message.error('仅支持查询单月，不支持跨年/跨月查询')
          return false
        }
        if (start_date.getMonth() != end_date.getMonth()) {
          this.$message.error('仅支持查询单月，不支持跨年/跨月查询')
          return false
        }
      }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/v1/merchant/divide/list'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize
            },
            params
          )
        )
      }).then(({ data }) => {
        console.log(data)
        this.dataList = data.data.divideList.records
        this.page.total = data.data.divideList.total
        this.divideOrderCount = data.data.divideOrderCount
        this.totalDivideAmount = data.data.totalDivideAmount
        this.totalOrderAmount = data.data.totalOrderAmount
        this.dataListLoading = false
      })
    },


    getAreaList() {
      this.$http({
        url: this.$http.adornUrl('/v1/merchant/system/get/all/region'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        this.options = data.data
      })
    },

    // 条件查询
    searchChange() {
      console.log(this.formData)
      if (this.formData.createDate && this.formData.createDate.length > 0) {
        this.formData.divideStartTime = this.formData.createDate[0]
        this.formData.divideEndTime = this.formData.createDate[1]
      }
      else {
        this.formData.divideStartTime = ''
        this.formData.divideEndTime = ''
      }
      this.page.currentPage = 1
      this.getDataList(this.page, this.formData)
    },
    sizeChange(val) {
      this.page.pageSize = val
      this.getDataList(this.page, this.formData)
    },
    currentChange(val) {
      this.page.currentPage = val
      this.getDataList(this.page, this.formData)
    },
    exportExcel() {
      this.$http({
        url: this.$http.adornUrl('/v1/merchant/divide/export'),
        method: 'get',
        params: this.$http.adornParams(this.formData),
        responseType: 'blob'
      }).then(({ data }) => {
        console.log(data)
        exportExcelCb(data, '电动自行车分佣记录列表.xls')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cell {
  text-align: left;
}

.el-input {
  width: 200px;
}

.sumary-list {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 15px;

  div {
    height: 30px;
    padding: 0px 12px;
    line-height: 30px;
    border: solid 1px #009FF1;
    border-radius: 15px;
    margin-right: 10px;
  }

  div:hover {
    color: white;
    background-color: #009FF1;
  }
}
</style>
